<template lang="pug">
.dashboard-info-wrap
  //- h1 单设备
  .tab-items
    .tab-item
      el-radio-group(v-model="currentTab",size="small")
        el-radio-button(v-for="tab in tableTab",:key="tab.name",:label="tab.name" ) {{tab.label}}
  span.btn-export.iconfont.icon-export(
    v-if="['datas','service','checkup'].includes(currentTab)"
    title='导出'
    @click="fileEvent(tableTabObj[currentTab].request)")
  HistoryTable(
    v-if="currentTab === 'datas'"
    ref="info"
    :header="columnList"
    :tableData="devicesData[0].data"
    :transTable="transTable")
  BasisInfo(
    v-if="currentTab === 'base'"
    :siteData="devicesData[0]")
  DeviceMaintain(
    v-if="currentTab === 'service'"
    :deviceId="devicesData[0].device.deviceId||devicesData[0].deviceId")
  DeviceInspect(
    v-if="currentTab === 'checkup'"
    :deviceId="devicesData[0].device.deviceId||devicesData[0].deviceId")
  InfoLifeCycle.infolifecycle(
    v-if="currentTab === 'life'"
    :siteId="devicesData[0].siteId")
  Accessory.accessory(
    v-if="currentTab === 'accessory'"
    :siteId="devicesData[0].siteId")
  EventAlarm(
    v-if="currentTab === 'alarm'"
    :siteId="devicesData[0].siteId")
</template>

<script >
/**
 * @name Dashboard 历史数据页面
 * @author 陈可嘉
 * @description 各种指标历史数据的展示
 * @update linmn
 * @description 点击坐标跳转到历史数据页面
 */
import HistoryTable from './HistoryTable'
import BasisInfo from './BasisInfo'
import DeviceMaintain from './DeviceMaintain'
import DeviceInspect from './DeviceInspect'
import InfoLifeCycle from './InfoLifeCycle'
import Accessory from './Accessory'
import EventAlarm from './EventAlarm'
import {keyBy} from 'lodash'
// import { deviceType } from '../../config/info'
export default {
  name: 'DashboardInfo',
  props: {
    target: String,
    parameterList: Array,
    devicesData: Array,
    interval: {
      type: String,
      default: ''
    },
    timeRange: Array
  },
  data () {
    return {
      currentTab: '数据列表',
      tableTab: []
    }
  },
  computed: {
    tableTabObj () {
      return keyBy(this.tableTab, 'name')
    },
    uploadTimeData () {
      return (this.target === 'waterQuantity' ? [] : [
        {
          label: '上传时间',
          minWidth: 115,
          mark: 'uploadTime',
          sort: true,
          formatter: (row, column, cellValue, index) => {
            if (!cellValue) return '-'
            return this.$moment(cellValue, 'x').format('YYYY-MM-DD HH:mm')
          }
        }
      ])
    },
    columnList () {
      return [
        ...this.uploadTimeData,
        {
          label: '采集时间',
          minWidth: 115,
          mark: 'recordTime',
          sort: true,
          formatter: (row, column, cellValue, index) => {
            if (!cellValue) return '-'
            return this.$moment(cellValue, 'x').format('YYYY-MM-DD HH:mm')
          }
        },
        ...this.parameterList.map(item => {
          return {
            ...item,
            value: item.mark,
            sort: true,
            formatter: (row, column, cellValue, index) => {
              return this.formatValue(cellValue)
            }
          }
        })
      ]
    },
    transTable () {
      return {
        transTableParams: this.transTableParams
      }
    }
  },
  watch: {
    devicesData (val) {
      this.resetTab()
    }
  },
  components: {
    HistoryTable,
    BasisInfo,
    DeviceMaintain,
    DeviceInspect,
    InfoLifeCycle,
    Accessory,
    EventAlarm
  },
  methods: {
    formatValue (val) {
      return val || val === 0 ? val.toFixed(3) : '-'
    },
    resetTab () {
      const datasUrl = this.target === 'waterQuantity' ? '/pn/monitor/device/waterQuantity/export' : '/pn/monitor/device/historySearch/export'
      this.tableTab = [
        {
          label: '数据列表',
          name: 'datas',
          request: {
            url: datasUrl,
            params: {
              'startTime': this.timeRange[0],
              'endTime': this.timeRange[1],
              ids: this.devicesData[0].id,
              intervalType: this.interval
            }}
        }, {
          label: '基础信息',
          name: 'base'
        }, {
          label: '维护记录',
          name: 'service',
          request: {
            url: 'pn/base/deviceMaintain/export',
            params: {
              filterBy: 'deviceId|eq|' + this.devicesData[0].id
            }
          }
        }, {
          label: '巡查记录',
          name: 'checkup',
          request: {
            url: 'pn/base/deviceInspect/export',
            params: {
              filterBy: 'deviceId|eq|' + this.devicesData[0].id
            }
          }
        }, {
          label: '生命周期',
          name: 'life'
        }, {
          label: '附件',
          name: 'accessory'
        }, {
          label: '告警信息',
          name: 'alarm'
        }
      ]
      const timeFormat = this.devicesData[0].deviceName === 'TPR' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm'
      this.columnList.find(item => item.mark === 'recordTime').formatter = (row, column, cellValue, index) => {
        if (!cellValue) return '-'
        return this.$moment(cellValue, 'x').format(timeFormat)
      }
      const uploadTime = this.columnList.find(item => item.mark === 'uploadTime')
      if (uploadTime) {
        uploadTime.formatter = (row, column, cellValue, index) => {
          if (!cellValue) return '-'
          return this.$moment(cellValue, 'x').format(timeFormat)
        }
      }
      this.currentTab = this.tableTab[0].name
    },
    fileEvent (request) {
      this.$get(request).then((res) => {
        // 生成a标签，模拟click下载files
        if (!res.data) {
          this.$alert('导出失败！')
          return
        }
        let a = document.createElement('a')
        a.href = `/api/dxbase/download/${res.data.shortUrl}`
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        event.stopPropagation()
        event.preventDefault()
      })
    },
    highLightTable (data) {
      if (this.$refs.info) {
        this.$refs.info.highLightTable(data)
      }
    }
  },
  mounted () {
    this.resetTab()
  }
}
</script>

<style lang="sass" scoped>
.dashboard-info-wrap
  display: flex
  width: calc(100% - 20px)
  height: calc(100% - 20px)
  overflow: hidden
  margin: 10px
  position: relative
  flex-direction: column
  .tab-items
    height: 40px
  .btn-export
    color: #a0a0a0
    font-size: 20px
    position: absolute
    right: 22px
    top: 8px
    cursor: pointer
/deep/.infolifecycle
  padding: 0 !important
</style>
